我的表單進化史

1.取得資料打包丟資料

最初看到表單，是使用 雙向綁定 的方式，取得和輸出資料，就可以將值打包成 json 傳給 伺服器

2.用事件去進行驗證

後續實作驗證，利用 blur 事件(說明：元素失去焦點觸發事件)傳送 $event.target.value 進行驗證，再利用 css 去顯示或隱藏 錯誤訊息
https://bear88130.github.io/validation/

3.Angular Template-driven forms 初見面

而後發現 Angulr 有專屬的表單應用，並不用自己造車，但真的要先理解 angular 表單該如何實作再開始，小弟途中誤打誤撞有實做出功能，但會發現有些可以動有些不能，就讓人滿頭問號，所以使用 Angular 表單，是有必要先看完說明，再行使用

4.再往 Reactive forms 前進

這禮拜六就會跟它多多親近了！

兩種表單

• Reactive forms (中文：反應的表單)
• Template-driven forms (中文：樣板驅動表單)

Reactive forms (中文：反應的表單) (或稱作 model-driven 模型驅動)
Reactive forms 提供 model-driven 的途徑去處理隨時間改變的表單值
https://angular.io/guide/reactive-forms#reactive-forms

Template-driven forms (中文：樣板驅動表單)
你可以建置表單，利用 Angaulr template 語法 中 形式特異 directives 和技術去撰寫。
https://angular.io/guide/forms#introduction-to-template-driven-forms

兩者都需要從 @angular/forms 匯入各自需要的 Module

Template-driven forms

src\app\app.module.ts
-----
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        FormsModule
    ],
})
export class AppModule { }

Reactive forms

src\app\app.module.ts
-----
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        ReactiveFormsModule
    ],
})
export class AppModule { }

兩者重要的差異

兩者重要的差異
https://angular.io/guide/forms-overview#key-differences

目前的想法

Template-driven forms

• 有後端驗證
• 簡單使用
• code 少
• 先學它就對了

Reactive forms

• 可以處理驗證
• 應該還有其他優點~等我再明白後